{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'js/jquery.form.js' %}"></script>
    <script src="{% static 'plugins/echarts/echarts.js'%}"></script>
    <script >
        $('.form_datetime').datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true,
            todayBtn: true,
            pickerPosition: 'bottom-left'
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '车场收入统计曲线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    saveAsImage: {}
                }
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'line',
                data: []
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var params = {'start_time':$('#start_time').val(), 'end_time':$('#end_time').val()}
        // 异步加载数据
        myChart.showLoading();
        $.get('{% url 'managerapp:report_income' %}',params).done(function (data) {
            data = JSON.parse(data)
             myChart.hideLoading();
            console.log(data.series_list)
            // 填入数据
            myChart.setOption({
                title: {
                    text: '车场收入统计曲线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data.parking_list,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type : 'category',
                    axisLabel:{
                         interval:0,
                         rotate:30,
                         margin:8,
                         textStyle:{
                             color:"#222"
                         }
                    },
                    data: data.day_list
                },
                yAxis: {type: 'value'},
                series: data.series_list
            });
        });
        $('#exportData').on('click', function () {
            var start_time = $('#start_time').val();
            var end_time = $('#end_time').val();
            window.location.href="{% url 'managerapp:export_income' %}?start_time="+start_time+"&end_time="+end_time;
        });
    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        报表统计
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 报表统计</li>
        <li class="active">车场收入</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">查询条件</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <form role="form">
            <div class="form-group">
                <label for="subtext" class="col-sm-1 control-label">开始时间</label>
                <div class="col-sm-3 ">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="start_time" name="start_time" size="16" type="text" value="{{ start_time }}">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <label for="subtext" class="col-sm-1 control-label">结束时间</label>
                <div class="col-sm-3">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="end_time" name="end_time" size="16" type="text" value="{{ end_time }}">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i> 查询</button>
                    <a class="btn btn-sm btn-primary " id="exportData"><i class="fa fa-download"></i> 导出 </a>
                </div>
            </div>
            </form>
          </div>
        </div>
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">报表展示</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <div id="main" style="height:400px;"></div>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </section>
    <!-- /.content -->
  </div>
{% endblock %}